<template>
  <view id="orderList">
      <!-- <view class="fixedBox"> -->
        <view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
        <uni-nav-bar left-icon="arrowleft"  @clickLeft="goBack" :fixed='true'>

                <view class="navbar-def">
                    <view :class="{'active':nowType==1}" @click="chooseType(1)">家政</view>
                    <view :class="{'active':nowType==2}" @click="chooseType(2)">医疗</view>
                </view>
            </uni-nav-bar>

        <view class="tab">
            <view :class="{'active':tabIndex==i}" v-for="(item,i) in ['待付款','待服务','待评价','已完成']" :key="i" @click="chooseTab(i)">
                    {{item}}
            </view>
        </view>
       <!-- </view> -->
       <view class="orderMain" v-if="t1">
           <orderList :status="tabIndex+1" :nowType='nowType' />
       </view>
  </view>
</template>

<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
import orderList from './orderList'
export default {
    components: {
        uniNavBar,
        orderList
    },
    data(){
        return{
            nowType:1,
            tabIndex:0,
            t1:true

        }
    },
    methods:{
        chooseType(i){
            this.nowType = i;
        },
        goBack(){
            // history.go(-1)
            uni.navigateBack()
        },
        chooseTab(i){
            this.tabIndex = i
            this.t1 = false
				setTimeout(()=>{
					this.t1 = true
				},10)
        },
    }

}
</script>

<style lang="scss" scoped>
uni-page-body{
    height: 100%;
    
}
#orderList{
    width: 100%;
    height:100%;
    box-sizing: border-box;
    padding-top: calc(44px + var(--status-bar-height));;
    position: relative;
    .fixedBox{
        // width: 100%;
        // position: absolute;
        // top: 0;
        // left: 0;
        // height: 200rpx;
        // z-index: 999;
    }
    .navbar-def{
		display: flex;
		width: 100%;
		justify-content: space-between;
		view{
			font-size: 32rpx;
			color: #101010;
			line-height: 30px;
			&.active{
				color: #247CF6;
				border-bottom: 2px solid #247CF6;
			}
			
		}
	}
     .tab{
        display: flex;
        justify-content: space-between;
        padding: 40rpx;
        position: fixed;
        z-index: 998;
        top: calc(44px + var(--status-bar-height));
        width: 100%;
        background: #f7f7f7;
        box-sizing: border-box;
        view{
            font-size: 28rpx;
            color: #a4a8b7;
            font-weight: 600;
            &.active{
                color: #2F87FF;
                position: relative;
                &:after{
                    content: '';
                    display: inline-block;
                    width: 40%;
                    height: 2px;
                    background: #2F87FF;
                    position: absolute;
                    bottom: -10rpx;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
            }
        }
    }
    .orderMain{
        // margin-top: 200rpx;
         //height: calc(100% - 220rpx);
        //box-sizing: border-box;
        // position: absolute;
        // top: 200rpx;
        // left: 0;
        width: 100%;
        //overflow: hidden;
       
    }
}
</style>